<template>
  <!-- 表格 -->
  <el-table class="pageTableClass" :data="taskNoPage" height="calc(100vh - 380px)" :loading="isLoading">
    <el-table-column label="序号" align="center" width="70">
      <template #default="scope">
        {{ (paginationParams.current - 1) * paginationParams.pageSize + scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="code" min-width="150" label="维修编号" align="center"/>
    <el-table-column prop="equipmentCode" min-width="200" label="设备编码" align="center"/>
    <el-table-column prop="organizationName" min-width="200" label="所属部门" align="center"/>
    <el-table-column prop="malfunctionName" min-width="180" label="故障类型" align="center" />
    <el-table-column prop="description" min-width="180" label="故障内容" align="center"/>
    <el-table-column prop="lastRepairTime" min-width="180" label="上次维修时间" align="center"/>
    <el-table-column prop="createTime" min-width="180" label="报修时间" align="center"/>
    <el-table-column prop="createUser" min-width="180" label="报修人" align="center"/>
    <el-table-column label="操作" align="center" fixed="right" width="100">
      <template #default="scope">
        <el-button style="color:#4160beed" :icon="CircleCheck" text @click="handleEdit(scope.row, true)"
                   size="small" plain>{{ scope.row.orderStatus === 'WAITING' ? "开始" : '完成' }}
        </el-button>
        <!--				<el-button :icon="Edit" text @click="handleEdit(scope.row)" size="small" plain>修改</el-button>-->
<!--        <el-button style="color:red" :icon="Delete" text @click="handleDel(scope.row)" size="small"-->
<!--                   plain>删除-->
<!--        </el-button>-->
      </template>
    </el-table-column>
  </el-table>
  <div class="pagePagination">
    <el-pagination background v-model:current-page="paginationParams.current"
                   v-model:page-size="paginationParams.pageSize" layout="total, sizes, prev, pager, next"
                   :total="pageTotal"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>

</template>

<script setup>
import {defineProps, ref, onMounted} from 'vue';
import {ElMessage} from 'element-plus';
import {
  CircleClose,
  CirclePlus,
  Delete,
  Edit,
  Download,
  CircleCheck,
  Plus,
  SwitchButton
} from '@element-plus/icons-vue';

const dialogVisible = ref(false);
const form = ref({});
const formLabelWidth = ref('120px');
const contentDialog = ref([]);
const props = defineProps({
  paginationParams: Object,
  onSubmit: Function,
  handleSizeChange: Function,
  handleCurrentChange: Function,
  taskNoPage: Array,
  pageTotal: Number,
  equipmentData: Object,
  fetchPage: Function,
  handleEdit: Function,
  handleDel: Function,
  faultTypeOptions: Array
});


</script>

<style scoped>
.pageTableClass {
  width: 100%;
}

.pagePagination {
  margin-top: 20px;
  text-align: center;
}
</style>